<template>
	<view class="container intlh">
		<!-- <lineUnit ref="condit" @confirm="conditConfirm" isShow></lineUnit> -->
		<view class="topSec flex flex-direction justify-center text-center">
			<view class="tsdis padding-left">
				系统叫号,过号作废
			</view>
			<view class="text-white padding-top">
				<view class="mnumber p_rlt d_ib">
					168
					<view class="mtips text-ngreen text-acenter text-df">
						3人组
					</view>
				</view>
			</view>
			<view class="text-center text-white padding-top-sm">
				排队号
			</view>
		</view>
		<view class="centSec text-lg padding-left-xl">
			<view class="flex align-center padding-tb">
				<view class="flex-sub text-c9">
					<view class="d_ib title">
						项 目
					</view>
				</view>
				<view class="dis">
					按摩/足浴
				</view>
			</view>
			<view class="flex align-center padding-tb">
				<view class="flex-sub text-c9">
					<view class="d_ib title">
						排队状态
					</view>
				</view>
				<view class="dis">
					前面还有1组
				</view>
			</view>
			<view class="flex align-center padding-tb">
				<view class="flex-sub text-c9">
					<view class="d_ib title">
						预估时间
					</view>
				</view>
				<view class="dis">
					＞60分钟
				</view>
			</view>
		</view>
		<view class="od_sub_btn_section">
			<view  class="flex justify-between">
				<view class="btn_com tohome solid" @click="tapToHome">取消排队</view>
				<view class="btn_com todetail" @click="tapToHome">回到首页</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import lineUnit from './lineComponments/lineUnit/lineUnit.vue';
	export default {
		// components: { lineUnit },
		data() {
			return {}
		},
		methods: {
			tapToHome() {
				uni.switchTab({
					url: '/pages/index/home/home',
					success: () => {
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.topSec{
	width: 100%;
	height: 43vh;
	background: #56BF7A;
	.tsdis{
		color: #F9F02A;
	}
	.mnumber{
		font-size: 110rpx;
	}
	.mtips{
		position: absolute;
		right: -106rpx;
		top: -20rpx;
		min-width: 110rpx;
		height: 40rpx;
		padding: 0 6rpx;
		border-radius: 40rpx;
		background: #FFF;
	}
}
.centSec{
	padding-top: 60rpx;
	.dis{
		min-width: 286rpx;
	}
	.title{
		min-width: 140rpx;
		text-align: justify;
		text-align-last: justify;
	}
}
.od_sub_btn_section {
	line-height: 1;
	// box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.05);
	position: fixed;
	z-index: 3;
	left: 0;
	bottom: 0rpx;
	width: 100%;
	padding: 20rpx 50rpx 40rpx 50rpx;
	// height: 100rpx;
	color: #fff;
	// background-color: #fff;
	overflow: hidden;
	.payBtn {
		width: 200rpx;
		height: 100rpx;
		line-height: 101rpx;
		background-color: #56bf7a;
		border-radius: 0 100rpx 100rpx 0;
		font-size: 32rpx;
	}
	.btn_com {
		height: calc(100% - 2px);
		// border: 2rpx solid #56BF7A;
		text-align: center;
		font-size: 28rpx;
		line-height: 101rpx;
		border-radius: 100rpx;
	}
	.tohome {
		width: 272rpx;
		color: #56bf7a;
		&::after {
			border: 1px solid #56bf7a;
		}
	}
	.todetail {
		width: 340rpx;
		color: #fff;
		background-color: #56bf7a;
	}
}
</style>
